<template>
	<view>
		<view class="tip">
			<view class="item" @click="openModal('ruyuanxuzhi','入园须知')">
				入园须知
			</view>
			<view class="item" @click="openModal('goupiaoxuzhi','购/退票须知')">
				购/退票须知
			</view>
		</view>
		<view class="list-1">
			<view class="item" v-for="(item,i) in menpiaoList" :key="item.id">
				<image class="icon-150" :src="item.image" mode="aspectFit"></image>
				<view class="info flex-1">
					<view class="title">{{item.name}}</view>
					<view class="price">
						￥{{item.price}}元/张
						<view class="del">￥{{item.hx_price}}元/张</view>
					</view>
				</view>
				<view class="num">
					<u-number-box v-model="item.value" buttonSize="25" inputWidth="25" @change="setValue($event,i,item.id,item)" :min="0"
						bgColor="#2979ff" iconStyle="color: #fff"></u-number-box>
				</view>
			</view>
		</view>
		<u-modal :show="modalShow" :title="title" confirm-text="我已阅读" @confirm="modalShow = false">
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		name: "n-menpiao",
		data() {
			return {
				menpiaoList: [],
				modalShow: false,
				content: '',
				title:''
			};
		},
		mounted() {
			this.getList()
		},
		methods: {
			openModal(name,title) {
				this.$api.getConfig({
					name
				}).then(res => {
					if (res.code == 1) {
						this.content = res.data
						this.title = title
						this.modalShow = true
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			updateMenpiaoNum(service_id){
				console.log('service_id',service_id)
				this.menpiaoList.forEach((item,i)=>{
					if(service_id==item.id){
						let item_1 = this.menpiaoList[i]
						item_1.value = 0
						this.$set(this.menpiaoList,i,item_1)
						console.log(i)
					}
				})
				console.log(this.menpiaoList)
			},
			getList() {
				this.$api.ticketsLists().then(res => {
					if (res.code == 1) {
						this.menpiaoList = res.data
						this.$api.certLists().then(res=>{
							if(res.code==1){
								if(res.data.length==0){
									this.cartShow = false
									let item_1 = this.menpiaoList[0]
									item_1.value = 0
									this.$set(this.menpiaoList,0,item_1)
									
									let item_2 = this.menpiaoList[1]
									item_2.value = 0
									this.$set(this.menpiaoList,1,item_2)
									
									let item_3 = this.menpiaoList[2]
									item_3.value = 0
									this.$set(this.menpiaoList,2,item_3)
								}
								let certLists = res.data
								certLists.forEach(item=>{
									console.log(item)
									if(item.type==1){
										if(item.service_id==3){
											let item_1 = this.menpiaoList[0]
											item_1.value = item.num
											this.$set(this.menpiaoList,0,item_1)
										}
										if(item.service_id==2){
											let item_1 = this.menpiaoList[1]
											item_1.value = item.num
											this.$set(this.menpiaoList,1,item_1)
										}
										if(item.service_id==1){
											let item_1 = this.menpiaoList[2]
											item_1.value = item.num
											this.$set(this.menpiaoList,2,item_1)
										}
									}
								})
							}else{
								this.$tools.toast(res.msg)
							}
						})
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			setValue(e, i,service_id,_item) {
				console.log(this.menpiaoList[i].value)
				console.log(e.value)
				let menpiao1 = uni.getStorageSync('menpiao1')
				let menpiao2 = uni.getStorageSync('menpiao2')
				let menpiao3 = uni.getStorageSync('menpiao3')
				if(!menpiao1 && i==0){
					this.content = this.menpiaoList[i].remark
					this.title = '温馨提示'
					if(this.menpiaoList[i].remark!=null && this.menpiaoList[i].remark!='' ){
						this.modalShow = true
						uni.setStorageSync('menpiao1',1)
					}
				}
				if(!menpiao2 && i==1){
					this.content = this.menpiaoList[i].remark
					this.title = '温馨提示'
					if(this.menpiaoList[i].remark!=null && this.menpiaoList[i].remark!='' ){
						this.modalShow = true
						uni.setStorageSync('menpiao2',2)
					}
				}
				if(!menpiao3 && i==2){
					this.content = this.menpiaoList[i].remark
					this.title = '温馨提示'
					if(this.menpiaoList[i].remark!=null && this.menpiaoList[i].remark!='' ){
						this.modalShow = true
						uni.setStorageSync('menpiao3',3)
					}
				}
				_item.value = e.value
				this.$set(this.menpiaoList,i,_item)
				this.$api.certAddCert({
					num:e.value,
					type:1,
					service_id
				}).then(res=>{
					if(res.code==1){
						this.$emit('updateCart')
					}else{
						this.$tools.toast(res.msg)
					}
				})
				console.log(this.menpiaoList)
			}
		}
	}
</script>

<style lang="scss">
	.slot-content{
		max-height: 70vh;
		overflow-y: scroll;
	}
	.tip {
		color: #3670ef;
		font-size: 30upx;
		@include flex;

		.item {
			margin: 0 20upx;
		}
	}

	.list-1 {
		.item {
			@include flex-between;
			border: 1px solid #eee;
			margin: 20upx;
			padding-right: 15upx;
			.info {
				margin: 0 24upx;
				font-weight: 600;
				
				.price {
					@include flex;

					.del {
						font-weight: 500;
						color: #999;
						text-decoration: line-through;
						font-size: 22upx;
						margin-left: 6upx;
					}
				}

			}
		}
	}
</style>